import { updatatUserProfileApi } from '@/api/user'
import { RootState } from '@/types/store'
import { Input, NavBar, TextArea } from 'antd-mobile'
import { InputRef } from 'antd-mobile/es/components/input'
import { TextAreaRef } from 'antd-mobile/es/components/text-area'
import { useEffect, useRef, useState } from 'react'
import { useSelector } from 'react-redux'

import styles from './index.module.scss'
type Props = {
  onCloseShow: () => void
  type: 'name' | 'intro' | ''
  updata: () => void
}

const EditInput = ({ onCloseShow, type, updata }: Props) => {
  const isName = type === 'name'
  const name = isName ? '昵称' : '简介'
  const { userProfile } = useSelector((state: RootState) => state.profile)
  const [value, setValue] = useState(
    isName ? userProfile.name : userProfile.intro
  )
  const inputRef = useRef<InputRef>(null)
  const textareaRef = useRef<TextAreaRef>(null)
  useEffect(() => {
    if (isName) {
      inputRef.current?.focus()
      console.log('昵称获取焦点')
    } else {
      console.log('简介获取焦点')
      textareaRef.current?.focus()
      document.querySelector('textarea')?.setSelectionRange(-1, -1)
    }
  }, [])

  return (
    <div className={styles.root}>
      <NavBar
        onBack={onCloseShow}
        className="navbar"
        right={
          <span className="commit-btn" onClick={updata}>
            提交
          </span>
        }
      >
        编辑{name}
      </NavBar>

      {isName ? (
        <div className="edit-input-content">
          <h3>{name}</h3>

          <div className="input-wrap">
            <Input
              placeholder="请输入"
              value={value}
              onChange={(e) => setValue(e)}
              ref={inputRef}
            />
          </div>
        </div>
      ) : (
        <TextArea
          placeholder="请输入内容"
          rows={5}
          style={{ background: '#fff', padding: 10, borderRadius: 5 }}
          value={value}
          onChange={(e) => setValue(e)}
          ref={textareaRef}
        />
      )}
    </div>
  )
}

export default EditInput
